<template>
    <view class="plate" v-if="pageData">
        <titleBox title="适用店铺"></titleBox>
        <view class="StoreList" v-for="(item, index) in pageData.slice(0, Num)" :key="index" @click="openStore(item)">
            <image :src="$imgUrls(item.logo)" mode="aspectFill" class="Store_img" v-if="item.logo"></image>
            <view class="flex-1 d-flex f-column m-left24">
                <text class="ellipsis size32 black">{{ item.name }}</text>
                <view class="d-flex a-center m-top10">
                    <text class="h6 color" v-if="item.score">评分：{{ item.score }}</text>
                    <text class="h6 color_33 m-left24" v-if="item.sales">销量：{{ item.sales }}</text>
                </view>
                <view class="row a-center m-top10">
                    <text class="flex-1 ellipsis color_33 size26">{{ item.address }}</text>
                    <view class="d-flex a-center">
                        <view class="iconfont icon-a-zu3947 color h6"></view>
                        <text class="color h6" v-if="item.distance">{{ item.distance }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="row j-centert color size28 p-top24" v-if="Num == 2" @click="Num = pageData.length">查看全部</view>
    </view>
</template>

<script>
    import titleBox from '@/subCard/components/titleBox.vue';
    export default {
        props: ['pageData'],
        components: {
            titleBox
        },
        data() {
            return {
                headImg: 'https://imgcdn.mogoie.com/6099/1709797684310.JPG',
                Num: 2
            };
        },
        methods: {
            openStore(Item) {
                if (!Item.pointx || !Item.pointy) return;
                const obj = {
                    s_latitude: Item.pointy,
                    s_longitude: Item.pointx,
                    name: Item.name,
                    nameAdress: Item.address
                };
                this.$pop.openLocation(obj);
            }
        },
        watch: {
            pageData(newVal, oldVal) {
                if (!newVal) return;
                if (newVal && newVal.length > 2) {
                    this.Num = 2;
                } else {
                    this.Num = newVal.length;
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .plate {
        width: 690rpx;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 20rpx;
        border-radius: 10rpx;
        margin-top: 24rpx;
    }
    .titleBox {
        width: 100%;
        padding-left: 20rpx;
        color: var(--color);
        font-size: 30rpx;
        position: relative;
    }
    .titleBox::before {
        content: '';
        width: 4rpx;
        height: 30rpx;
        background-color: var(--color);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    .StoreList {
        width: 100%;
        padding: 24rpx 20rpx;
        margin-top: 20rpx;
        background-color: #f2f2f2;
        display: flex;
        align-items: center;
        border-radius: 10rpx;
        .Store_img {
            width: 100rpx;
            height: 100rpx;
            background-color: #ffffff;
            border-radius: 50%;
        }
    }
</style>
